<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">

    <div class="main-box">
        <ol class="breadcrumb crumbs">
            <li>项目管理</li>
        </ol>

        <div class="search-bar">
            <input type="text" placeholder="输入运单号查询" id="searchBox">
            <button class="btn btn-default btn-in-input dropdown-toggle"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
            <ul class="dropdown-menu" style="left: unset;right: 20px;">
                <li><a href="${base}/admin/project/edit?type=PUBLIC">公共订单</a></li>
                <li><a href="${base}/admin/project/edit?type=DIRECT">定向订单</a></li>
            </ul>
        </div>
        <div style="padding: 10px">
            <table id="table"></table>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        $('#searchBox').keypress(function (event) {
            if (event.keyCode === 13) {
                if (event.keyCode === 13) {
                    if (event.keyCode === 13) {
                        var searchValue = $(this).val();
                        dataTable.bootstrapTable("refresh", {
                            query: {
                                no: searchValue
                            }
                        })

                    }
                }
            }
        });
        var dataTable = $('#table');
        dataTable.bootstrapTable({
            pagination: true,
            url: API_WAYBILL + '/page',
            ajaxOptions: {
                headers: {
                    access_token: getToken()
                }
            },
            responseHandler: function (res) {
                return {
                    "total": res.total,
                    "rows": res.list
                };
            },
            sidePagination: 'server',
            columns: [
                {field: 'id', title: 'ID', visible: false},
                {
                    field: 'no', title: '运单号', width: 200, formatter: function (value, row) {
                        return '<a href=' + ctx + 'project/' + value + '>' + value + '</a>';
                    }
                },
                {
                    field: 'shipper', title: '托运方', width: 100, formatter: function (value) {
                        return value.name
                    }
                },
                {
                    field: 'receiver', title: '收货方', width: 100, formatter: function (value) {
                        return value.name
                    }
                },
                {
                    field: 'type', title: '类型', width: 100, formatter: function (value) {
                        return showWaybillTypeName(value);
                    }
                },
                {
                    field: 'startPlace', title: '起点', formatter: function (value, rows) {
                        return rows.shipper.address
                    }
                },
                {
                    field: 'endPlace', title: '终点', formatter: function (value, rows) {
                        return rows.receiver.address
                    }
                },
                {
                    field: 'transportTime', title: '启运时间', width: 150, align: 'center', formatter: function (value) {
                        if (value) {
                            return new Date(value).format('yyyy-MM-dd hh:mm:ss')
                        }
                    }
                },
                {
                    field: 'doneTime', title: '实际到货时间', width: 150, align: 'center', formatter: function (value) {
                        if (value) {
                            return new Date(value).format('yyyy-MM-dd hh:mm:ss')
                        }

                    }
                },
                {
                    field: 'status', title: '状态', width: 100, align: 'center', formatter: function (value) {
                        return showWaybillStatusName(value);

                    }
                }
            ]
        });
    })
</script>